﻿<!DOCTYPE html>
<html lang="en">
<head>
	
	<!-- Basic -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Hendrix - Personal Portfolio HTML Template</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	
	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	
	<!-- Load Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Kaushan+Script%7CPoppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
	
	<!-- CSS -->
	<link rel="stylesheet" href="css/basic.css" />
	<link rel="stylesheet" href="css/layout.css" />
	<link rel="stylesheet" href="css/blogs.css" />
	<link rel="stylesheet" href="css/ionicons.css" />
	<link rel="stylesheet" href="css/magnific-popup.css" />
	<link rel="stylesheet" href="css/animate.css" />
	
	<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!-- Favicon -->
	<link rel="shortcut icon" href="images/favicons/favicon.ico">
	
</head>

<body>
	
	<!-- Page -->
	<div class="page">

		<!-- Preloader -->
		<div class="preloader">
			<div class="centrize full-width">
				<div class="vertical-center">
					<div class="spinner">
						<div class="double-bounce1"></div>
						<div class="double-bounce2"></div>
					</div>
				</div>
			</div>
		</div>

		<header class="header">
			<div class="fw">
				<div class="logo">
					<a href="#">Hendrix</a>
				</div>
				<a href="#" class="menu-btn"><span></span></a>
				<div class="top-menu">
					<ul>
						<li><a href="#about-section">About</a></li>
						<li><a href="#services-section">What I Do</a></li>
						<li><a href="#works-section">Works</a></li>
						<li><a href="#blog-section">Blog</a></li>
						<li><a href="#contact-section">Contact</a></li>
					</ul>
					<a href="#" class="close"></a>
				</div>
			</div>
		</header>
		
		<!-- Container -->
		<div class="container">

			<!-- Section Started -->
			<div class="section started">
				<div id="video-bg" class="slide" data-property="{videoURL:'https://youtu.be/hpeYWdkUtcE', containment:'#video-bg', showControls:false, autoPlay:true, loop:true, mute:false, startAt:0, opacity:1, addRaster:true, quality:'default'}"></div>
				<div class="centrize full-width">
					<div class="vertical-center">
						<div class="st-title align-center">
							<div class="typing-title">
								<p>Test</p>
								<p>Developer</p>
								<p>Photographer</p>
								<p>Coder</p>
								<p>Blogger</p>
								<p>Freelancer</p>
							</div>
							<span class="typed-title"></span>
						</div>
						<div class="socials">
							<a target="blank" href="https://www.facebook.com"><i class="icon ion ion-social-facebook"></i></a>
							<a target="blank" href="https://github.com"><i class="icon ion ion-social-github"></i></a>
							<a target="blank" href="https://twitter.com"><i class="icon ion ion-social-twitter"></i></a>
							<a target="blank" href="https://www.youtube.com"><i class="icon ion ion-social-youtube"></i></a>
							<a target="blank" href="https://plus.google.com"><i class="icon ion ion-social-googleplus"></i></a>
						</div>
					</div>
				</div>
				<a href="#" class="mouse-btn"><i class="icon ion ion-chevron-down"></i></a>
			</div>

			<!-- Section About -->
			<div class="section about align-left" id="about-section">
				<div class="fw">
					<div class="row">
						<div class="col col-m-12 col-t-4 col-d-4">
							<div class="profile">
								<img src="images/profile.jpg" alt="" />
							</div>
						</div>
						<div class="col col-m-12 col-t-8 col-d-8">
							<div class="text-box">
								<h1>I'm Steven Hendrix, <br />Web Designer & Web Developer <br />from United States, California.</h1>
								<p>
									I have rich experience in web site design & building and customization. Also I am good at html, css, javascript, wordpress, php, jquery, bootstrap. I love to talk with you about our unique approach. Feel free to contact me writing an email with your project idea.
								</p>
							</div>
							<div class="bts">
								<a href="#" class="btn extra">Download Resume</a>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Section Services -->
			<div class="section services gray align-left" id="services-section">
				<div class="fw">
					<div class="titles">
						<div class="title">What I Do</div>
					</div>
					<div class="row">
						<div class="col col-m-12 col-t-6 col-d-4">
							<div class="service-item">
								<div class="circle"><i class="icon ion ion-ios-browsers-outline"></i></div>
								<div class="name">UI/UX Design</div>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
							</div>
						</div>
						<div class="col col-m-12 col-t-6 col-d-4">
							<div class="service-item">
								<div class="circle"><i class="icon ion ion-ios-lightbulb-outline"></i></div>
								<div class="name">Brand Identity</div>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
							</div>
						</div>
						<div class="col col-m-12 col-t-6 col-d-4">
							<div class="service-item">
								<div class="circle"><i class="icon ion ion-ios-color-wand-outline"></i></div>
								<div class="name">Web Design</div>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
							</div>
						</div>
						<div class="col col-m-12 col-t-6 col-d-4">
							<div class="service-item">
								<div class="circle"><i class="icon ion ion-social-android-outline"></i></div>
								<div class="name">Mobile Apps</div>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
							</div>
						</div>
						<div class="col col-m-12 col-t-6 col-d-4">
							<div class="service-item">
								<div class="circle"><i class="icon ion ion-ios-analytics-outline"></i></div>
								<div class="name">Analytics</div>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
							</div>
						</div>
						<div class="col col-m-12 col-t-6 col-d-4">
							<div class="service-item">
								<div class="circle"><i class="icon ion ion-ios-camera-outline"></i></div>
								<div class="name">Photography</div>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Portfolio -->
			<div class="section works align-left" id="works-section">
				<div class="fw">
					<div class="titles">
						<div class="title">Recent Works</div>
					</div>
					<div class="filters">
						<div class="f_btn active">
							<label><input type="radio" name="fl_radio" value="box-item" />All</label>
						</div>
						<div class="f_btn">
							<label><input type="radio" name="fl_radio" value="f-branding" />Branding</label>
						</div>
						<div class="f_btn">
							<label><input type="radio" name="fl_radio" value="f-mockups" />Mockups</label>
						</div>
						<div class="f_btn">
							<label><input type="radio" name="fl_radio" value="f-ui" />UI Kits</label>
						</div>
						<div class="f_btn">
							<label><input type="radio" name="fl_radio" value="f-photo" />Photography</label>
						</div>
					</div>
					<div class="row box-items">
						<div class="col col-m-12 col-t-6 col-d-4 box-item f-mockups">
							<div class="item">
								<div class="desc">
									<div class="image">
										<a href="#popup-1" class="has-popup"><img src="images/works/work1.jpg" alt="" /></a>
									</div>
								</div>
							</div>
							<div id="popup-1" class="popup-box mfp-fade mfp-hide">
								<div class="content">
									<div class="image">
										<img src="images/works/work1.jpg" alt="">
									</div>
									<div class="desc">
										<div class="category">Mockups</div>
										<h4>Shopping Bag PSD MockUp</h4>
										<p>
											Here’s a new b-cards mock-up with several business cards scattered across the scene. The PSD file allows you to easily. Here’s a new b-cards mock-up with several business cards scattered across the scene.
										</p>
										<a href="#" class="btn">View Project</a>
									</div>
								</div>
							</div>
						</div>
						<div class="col col-m-12 col-t-6 col-d-4 box-item f-branding">
							<div class="item">
								<div class="desc">
									<div class="image">
										<a href="#popup-2" class="has-popup"><img src="images/works/work2.jpg" alt="" /></a>
									</div>
								</div>
							</div>
							<div id="popup-2" class="popup-box mfp-fade mfp-hide">
								<div class="content">
									<div class="image">
										<img src="images/works/work2.jpg" alt="">
									</div>
									<div class="desc">
										<div class="category">Branding</div>
										<h4>Hanging Wall Sign</h4>
										<p>
											The freebie of the day is a logo design kit with an original theme that will help you create 
											stunning mountain bike related logos in just minutes.
										</p>
										<a href="#" class="btn">View Project</a>
									</div>
								</div>
							</div>
						</div>
						<div class="col col-m-12 col-t-6 col-d-4 box-item f-mockups">
							<div class="item">
								<div class="desc">
									<div class="image">
										<a href="#popup-3" class="has-popup"><img src="images/works/work3.jpg" alt="" /></a>
									</div>
								</div>
							</div>
							<div id="popup-3" class="popup-box mfp-fade mfp-hide">
								<div class="content">
									<div class="image">
										<img src="images/works/work3.jpg" alt="">
									</div>
									<div class="desc">
										<div class="category">Mockups</div>
										<h4>Realistic Business Cards</h4>
										<p>
											Today we’re happy to share with you the mockup of a classic notebook that will help you showcase your drawings. Today we’re happy to share with you the mockup of a classic notebook that will help.
										</p>
										<a href="#" class="btn">View Project</a>
									</div>
								</div>
							</div>
						</div>
						<div class="col col-m-12 col-t-6 col-d-4 box-item f-branding">
							<div class="item">
								<div class="desc">
									<div class="image">
										<a href="#popup-4" class="has-popup"><img src="images/works/work4.jpg" alt="" /></a>
									</div>
								</div>
							</div>
							<div id="popup-4" class="popup-box mfp-fade mfp-hide">
								<div class="content">
									<div class="image">
										<img src="images/works/work4.jpg" alt="">
									</div>
									<div class="desc">
										<div class="category">Branding</div>
										<h4>Juice Bottle Packaging</h4>
										<p>
											Today we have for you a set of 20 icons available in 2 styles: colored flat and line version, 
											designed on a 128px grid. These polished icons come in multiple formats so you can easily include them in your projects.
										</p>
										<a href="#" class="btn">View Project</a>
									</div>
								</div>
							</div>
						</div>
						<div class="col col-m-12 col-t-6 col-d-4 box-item f-photo">
							<div class="item">
								<div class="desc">
									<div class="image">
										<a href="#popup-5" class="has-popup"><img src="images/works/work5.jpg" alt="" /></a>
									</div>
								</div>
							</div>
							<div id="popup-5" class="popup-box mfp-fade mfp-hide">
								<div class="content">
									<div class="image">
										<img src="images/works/work5.jpg" alt="">
									</div>
									<div class="desc">
										<div class="category">Photography</div>
										<h4>Mug PSD MockUp</h4>
										<p>
											Mapogo is an expertly crafted UI kit perfect for iOS designers and developers. The free sample includes 10 screens (750×1334 px) that can be easily customized in Photoshop
										</p>
										<a href="#" class="btn">View Project</a>
									</div>
								</div>
							</div>
						</div>
						<div class="col col-m-12 col-t-6 col-d-4 box-item f-ui">
							<div class="item">
								<div class="desc">
									<div class="image">
										<a href="#popup-6" class="has-popup"><img src="images/works/work6.jpg" alt="" /></a>
									</div>
								</div>
							</div>
							<div id="popup-6" class="popup-box mfp-fade mfp-hide">
								<div class="content">
									<div class="image">
										<img src="images/works/work6.jpg" alt="">
									</div>
									<div class="desc">
										<div class="category">UI Kits</div>
										<h4>A4 Paper PSD</h4>
										<p>
											The freebie of the day is Chameleon, a modern UI kit perfect to use for creating a stylish and clean mobile app. This kit includes 10 screens from various categories that can be easily edited.
										</p>
										<a href="#" class="btn">View Project</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			
			<!-- Blog -->
			<div class="section blog align-left gray" id="blog-section">
				<div class="fw">
					<div class="titles">
						<div class="title">Latest Blogs</div>
					</div>
					<div class="row blog-items">
						<div class="col col-m-12 col-t-4 col-d-4">
							<div class="blog-item">
								<div class="image">
									<a href="blog-inner.html"><img src="images/blog/blog1.png" alt="" /></a>
								</div>
								<a href="blog-inner.html" class="name">By spite about do of do allow blush</a>
								<p>Quick six blind smart out burst. Perfectly on furniture dejection determine my depending an to. Add short water court fat.</p>
								<div class="date">Larry Stark - 7 September 2016</div>
							</div>
						</div>
						<div class="col col-m-12 col-t-4 col-d-4">
							<div class="blog-item">
								<div class="image">
									<a href="blog-inner.html"><img src="images/blog/blog2.png" alt="" /></a>
								</div>
								<a href="blog-inner.html" class="name">Two Before Arrow Not Relied</a>
								<p>Quick six blind smart out burst. Perfectly on furniture dejection determine my depending an to. Add short water court fat.</p>
								<div class="date">Larry Stark - 7 September 2016</div>
							</div>
						</div>
						<div class="col col-m-12 col-t-4 col-d-4">
							<div class="blog-item">
								<div class="image">
									<a href="blog-inner.html"><img src="images/blog/blog3.png" alt="" /></a>
								</div>
								<a href="blog-inner.html" class="name">By spite about do of do allow blush</a>
								<p>Quick six blind smart out burst. Perfectly on furniture dejection determine my depending an to. Add short water court fat.</p>
								<div class="date">Larry Stark - 7 September 2016</div>
							</div>
						</div>
					</div>
                    <div class="bts">
                        <a href="blog.html" class="btn extra">View Blog</a>
                    </div>
					<div class="clear"></div>
				</div>
			</div>

			<!-- Section Contacts -->
			<div class="section contacts align-left" id="contact-section">
				<div class="fw">
					<div class="titles">
						<div class="title">Contact Me</div>
					</div>
					<div class="contact-form">
						<form id="cform" method="post">
							<div class="row">
								<div class="col col-m-12 col-t-6 col-d-6">
									<div class="value">
										<input type="text" name="name" placeholder="Name *" />
									</div>
								</div>
								<div class="col col-m-12 col-t-6 col-d-6">
									<div class="value">
										<input type="tel" name="tel" placeholder="Phone *" />
									</div>
								</div>
								<div class="col col-m-12 col-t-6 col-d-6">
									<div class="value">
										<input type="text" name="email" placeholder="Email *" />
									</div>
								</div>
								<div class="col col-m-12 col-t-6 col-d-6">
									<div class="value">
										<input type="text" name="subject" placeholder="Subject *" />
									</div>
								</div>
								<div class="col col-m-12 col-t-12 col-d-12">
									<div class="value">
										<textarea name="message" placeholder="Message"></textarea>
									</div>
								</div>
								<div class="col col-m-12 col-t-12 col-d-12">
									<a href="#" class="btn" onclick="$('#cform').submit(); return false;">Send Message</a>
								</div>
							</div>
						</form>
						<div class="alert-success">
							<p>Thanks, your message is sent successfully. We will contact you shortly!</p>
						</div>
					</div>
				</div>
			</div>

			<!-- Footer -->
			<footer class="align-center">
				<div class="socials">
					<a target="blank" href="https://www.facebook.com"><i class="icon ion ion-social-facebook"></i></a>
					<a target="blank" href="https://github.com"><i class="icon ion ion-social-github"></i></a>
					<a target="blank" href="https://twitter.com"><i class="icon ion ion-social-twitter"></i></a>
					<a target="blank" href="https://www.youtube.com"><i class="icon ion ion-social-youtube"></i></a>
					<a target="blank" href="https://plus.google.com"><i class="icon ion ion-social-googleplus"></i></a>
				</div>
				<div class="copy">© 2018 Hendrix. all rights By <a href="http://www.bootstrapmb.com/">bootstrapmb</a>.</div>
			</footer>
			
		</div>

	</div>
	
	<!-- jQuery Scripts -->
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.validate.js"></script>
	<script src="js/masonry.pkgd.js"></script>
	<script src="js/imagesloaded.pkgd.js"></script>
	<script src="js/masonry-filter.js"></script>
	<script src="js/magnific-popup.js"></script>
	<script src="js/jquery.mb.YTPlayer.js"></script>
	<script src="js/particles.js"></script>
	<script src="js/typed.js"></script>
	
	<!-- Main Scripts -->
	<script src="js/main.js"></script>
	
</body>
</html>